<template>
    <div class="not-found-container">
        <div class="content">
            <div class="error-code">
                <span class="number">4</span>
                <div class="circle">
                    <div class="face">
                        <div class="eyes">
                            <div class="eye left"></div>
                            <div class="eye right"></div>
                        </div>
                        <div class="mouth"></div>
                    </div>
                </div>
                <span class="number">4</span>
            </div>
            <h1 class="title">页面未找到</h1>
            <p class="description">抱歉，您访问的页面不存在或已被移除</p>
            <el-button type="primary" @click="goHome" class="home-button">
                返回首页
            </el-button>
        </div>
    </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()

const goHome = () => {
    router.push('/')
}
</script>

<style lang="scss" scoped>
.not-found-container {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

.content {
    text-align: center;
    padding: 2rem;
    animation: fadeIn 0.8s ease-out;
}

.error-code {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2rem;
    position: relative;
}

.number {
    font-size: 8rem;
    font-weight: bold;
    color: #409EFF;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
    animation: bounce 2s infinite;
}

.circle {
    width: 100px;
    height: 100px;
    background: #409EFF;
    border-radius: 50%;
    margin: 0 1rem;
    position: relative;
    animation: rotate 10s linear infinite;
}

.face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.eyes {
    display: flex;
    gap: 20px;
    margin-bottom: 10px;
}

.eye {
    width: 12px;
    height: 12px;
    background: white;
    border-radius: 50%;
    animation: blink 3s infinite;
}

.mouth {
    width: 30px;
    height: 15px;
    border-bottom: 4px solid white;
    border-radius: 0 0 20px 20px;
}

.title {
    font-size: 2.5rem;
    color: #303133;
    margin-bottom: 1rem;
    animation: slideUp 0.8s ease-out;
}

.description {
    font-size: 1.2rem;
    color: #606266;
    margin-bottom: 2rem;
    animation: slideUp 0.8s ease-out 0.2s backwards;
}

.home-button {
    padding: 12px 30px;
    font-size: 1.1rem;
    animation: slideUp 0.8s ease-out 0.4s backwards;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes blink {
    0%, 45%, 55%, 100% {
        transform: scaleY(1);
    }
    50% {
        transform: scaleY(0.1);
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
</style>